<script setup>
import {DbTypes} from "../../js/common.js";

const emit = defineEmits(['close','save'])

// 定义 props
const props = defineProps({
  currentConn: {
    type: Object,
    required: true
  },
});
</script>

<template>
  <div class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-card" style="width:960px">
      <header class="modal-card-head">
        <p class="modal-card-title">数据源设置</p>
        <button class="delete" aria-label="close" @click="emit('close')"></button>
      </header>
      <section class="modal-card-body">
        <!--索引设置 Begin-->
        <div v-if="currentConn">
          <div class="field">
            <label class="label">数据源名称</label>
            <div class="control">
              <input class="input is-link" type="text" placeholder=""
                     v-model="currentConn.connName">
            </div>
            <span class="help is-success">名称只能是英文</span>
          </div>

          <div class="field">
            <label class="label">数据库类型</label>
            <div class="control is-expanded">
              <div class="select is-fullwidth is-link">
                <select v-model="currentConn.connType">
                  <option>选择数据库</option>
                  <option v-for="(value,key) in DbTypes" :value="key">{{key}}</option>
                </select>
              </div>
            </div>
          </div>

          <div class="field">
            <label class="label">驱动</label>
            <div class="control is-expanded">
              <div class="select is-fullwidth is-link">
                <input class="input is-link" type="text" placeholder=""  v-model="currentConn.connDriver">
              </div>
            </div>
            <span class="help is-success">例子：{{currentConn.connType &&DbTypes[currentConn.connType] ?DbTypes[currentConn.connType].driver:''}}</span>
          </div>
          <div class="field">
            <label class="label">数据库连接</label>
            <div class="control">
              <input class="input is-link" type="text" placeholder="*" v-model="currentConn.connUrl">
            </div>
            <span class="help is-success">例子：{{currentConn.connType && DbTypes[currentConn.connType] ?DbTypes[currentConn.connType].connectionString:''}}</span>
          </div>
          <div class="field">
            <label class="label">用户名</label>
            <div class="control is-expanded">
              <div class="select is-fullwidth is-link">
                <input class="input is-link" type="text" placeholder="*" v-model="currentConn.connUser">

              </div>
            </div>
          </div>
          <div class="field">
            <label class="label">密码</label>
            <div class="control">
              <input class="input is-link" type="text" placeholder="*" v-model="currentConn.connPassword">
            </div>
          </div>
        </div>
        <!--索引设置 End-->
      </section>
      <footer class="modal-card-foot is-flex is-justify-content-flex-end">
        <div class="buttons">
          <button class="button is-link" @click="emit('save')">保存</button>
        </div>
      </footer>
    </div>
  </div>
</template>

<style scoped>

</style>